<template>
  <view class="test-icon-page">
    <view class="header">
      <text class="title">图标重复显示测试页面</text>
    </view>
    
    <!-- 测试区域1: 基础u-icon使用 -->
    <view class="test-section">
      <text class="section-title">1. 基础u-icon使用</text>
      <view class="test-grid">
        <view class="test-item">
          <u-icon name="file-text" color="#1890ff" size="24"></u-icon>
          <text>file-text</text>
        </view>
        <view class="test-item">
          <u-icon name="calendar" color="#52c41a" size="24"></u-icon>
          <text>calendar</text>
        </view>
        <view class="test-item">
          <u-icon name="tools" color="#faad14" size="24"></u-icon>
          <text>tools</text>
        </view>
      </view>
    </view>
    
    <!-- 测试区域2: 在容器中的u-icon -->
    <view class="test-section">
      <text class="section-title">2. 容器中的u-icon</text>
      <view class="container-test">
        <view class="icon-container" style="background: #3742fa;">
          <u-icon name="file-text" color="#fff" size="20"></u-icon>
        </view>
        <view class="icon-container" style="background: #2ed573;">
          <u-icon name="calendar" color="#fff" size="20"></u-icon>
        </view>
      </view>
    </view>
    
    <!-- 测试区域3: 对比iconfont -->
    <view class="test-section">
      <text class="section-title">3. 对比iconfont字体图标</text>
      <view class="font-test">
        <text class="iconfont">&#xe600;</text>
        <text class="iconfont">&#xe601;</text>
        <text class="iconfont">&#xe602;</text>
      </view>
    </view>
    
    <!-- 测试区域4: 混合使用 -->
    <view class="test-section">
      <text class="section-title">4. 混合使用测试</text>
      <view class="mixed-test">
        <view class="mixed-item">
          <u-icon name="file-text" color="#1890ff" size="16"></u-icon>
          <text class="iconfont">&#xe600;</text>
          <text>混合测试</text>
        </view>
      </view>
    </view>
    
    <!-- 调试信息 -->
    <view class="debug-section">
      <text class="section-title">调试信息</text>
      <view class="debug-info">
        <text>uView Plus版本: {{ uviewVersion }}</text>
        <text>当前时间: {{ currentTime }}</text>
        <text>页面路径: {{ pagePath }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const uviewVersion = ref('')
const currentTime = ref('')
const pagePath = ref('')

onMounted(() => {
  currentTime.value = new Date().toLocaleString()
  pagePath.value = getCurrentPages()[getCurrentPages().length - 1].route
  
  // 尝试获取uView版本信息
  try {
    // 这里可以添加获取uView版本信息的逻辑
    uviewVersion.value = 'uView Plus (版本检测中)'
  } catch (error) {
    uviewVersion.value = '版本检测失败'
  }
})
</script>

<style lang="scss" scoped>
.test-icon-page {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.header {
  text-align: center;
  margin-bottom: 30px;
  
  .title {
    font-size: 20px;
    font-weight: bold;
    color: #333;
  }
}

.test-section {
  background: white;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  
  .section-title {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 2px solid #2d8cf0;
  }
}

.test-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  
  .test-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    
    text {
      margin-top: 8px;
      font-size: 12px;
      color: #666;
    }
  }
}

.container-test {
  display: flex;
  gap: 15px;
  
  .icon-container {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.font-test {
  display: flex;
  gap: 20px;
  align-items: center;
  
  .iconfont {
    font-size: 24px;
    color: #1890ff;
  }
}

.mixed-test {
  .mixed-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    
    .iconfont {
      font-size: 16px;
      color: #52c41a;
    }
    
    text {
      font-size: 14px;
      color: #333;
    }
  }
}

.debug-section {
  background: #f0f8ff;
  border: 1px solid #d6e4ff;
  
  .debug-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    
    text {
      font-size: 12px;
      color: #666;
      font-family: monospace;
    }
  }
}
</style>
